<template>
  <div>
    <!-- 页面内容 -->
    <div class="page-body">
      <el-form :model="queryForm" :inline="true" ref="queryFormRef" size="small" @submit.native.prevent>
        <el-form-item>
          <el-input size="small" placeholder="请输入商户名称" v-model.trim="queryForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker size="small" v-model="queryTime" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :value-format="'yyyy-MM-dd'"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" class="width_104" type="primary" @click="getPageDataList()">查询</el-button>
          <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table class="margin_top_20" stripe :data="pageData" :header-cell-style="tableHeaderStyle" row-key="index" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="42"></el-table-column>
        <el-table-column prop="refundNo" label="分帐单号"></el-table-column>
        <el-table-column prop="targetName" label="商户名称"></el-table-column>
        <el-table-column prop="bankAccountName" label="收款人"></el-table-column>
        <el-table-column prop="bankPhone" label="手机号"></el-table-column>
        <el-table-column prop="bankCardNo" label="银行卡号"></el-table-column>
        <el-table-column prop="withdrawTime" label="提现时间"></el-table-column>
        <el-table-column prop="refundMoney" label="提现金额"></el-table-column>
        <el-table-column prop="createTime" label="结算时间"></el-table-column>
        <el-table-column prop="withdrawStatus" label="结算状态">
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.withdrawStatus">{{scope.row.withdrawStatus | withdrawStatusFilter }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center">
        <br>
        <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
          :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Setting from '@/settings';
import { mapGetters } from 'vuex';
import { GetSettlementDataList } from '@/views/settlement-management/services/index';
export default {
  props: {
    currentNode: {
      type: String,
      default: null
    },
  },
   filters: {
     withdrawStatusFilter(val) {
       switch(val) {
          case 1:
            return  "待打款"
            break;
          case 2:
            return  "已到账"
            break;
       }
     }
  },
  
  data() {
    return {
      title: '',
      queryForm: {
        refundStatus: '',
        refundType: '',
        name: '',
        userType: '',
        paymentType: '0'
      },
      queryTime: [],
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      pageData: [],
      pageCount: 0,
      loading: false,
      isShowModel: false,
      isShowPowerModel: false,
      isShowChangeModel: false,
      multipleSelection: [],
      statusDataList: [
        { value: '', label: '全部' },
        { value: '0', label: '启用' },
        { value: '1', label: '禁用' },
      ],
      editMemberId: null,
      editUserType: 0,
      parentIds: []
    }
  },
  watch: {
    currentNode: {
      immediate: true,
      handler: function (newValue) {
        if (!newValue) return;
        this.getPageDataList();
      }
    }
  },
  computed: {
    ...mapGetters(['roleBtns'])
  },
  methods: {
    handleSelectionChange(selectlist) {
      this.multipleSelection = selectlist;
    },
    handlePagingChange(event) {
      this.pageIndex = event;
      this.getPageDataList();
    },
    handleSizeChange(event) {
      this.pageIndex = 1;
      this.pageSize = event;
      this.getPageDataList();
    },
    getPageDataList() {
      this.loading = true;
      GetSettlementDataList({
        targetType: '1',
        name: this.queryForm.name,
        refundStatus: this.queryForm.refundStatus,
        refundType: this.queryForm.refundType,
        startTime: this.queryTime && this.queryTime[0] ? this.queryTime[0] : '',
        endTime: this.queryTime && this.queryTime[1] ? this.queryTime[1] : '',
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      })
        .finally(() => (this.loading = false))
        .then(data => {
          if (data.code == 200) {
            this.pageData = data.data.list
            this.pageCount = data.data.total;

            if ((!data.data.list || !data.data.list.length) && this.pageIndex > 1) {
              this.pageIndex = 1;
              this.getPageDataList();
            }
          }
        })
    },
    resetOption() {
      this.queryForm.name = '';
      this.queryForm.refundStatus = '';
      this.queryForm.userType = '';
      this.queryForm.paymentType = '0';
      this.queryForm.refundType = '';
      this.queryTime = [];
      this.getPageDataList();
    }
  }
}
</script>

<style lang="scss" scoped>
.width_104 {
  width: 104px;
}
</style>
